<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Throughout 
Description: A two-column, fixed-width design for 1024x768 screen resolutions.
Version    : 1.0
Released   : 20100423

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Magic Table</title>
<meta name="keywords" content="Google visualisation API, html, html 5, javascript, table, visualisation, visualization, information visualisation, information visualization, InfoVis, data visualisation, data visualization, web vis, web visualisation, web visualization, distortion, fish-eye, fish-eye lens, fisheye, fisheye lens, chart, barchart, scatterplot, graph, graphics, canvas, canvas element" />
<meta name="description" content="The Magic Table is a JavaScript library that allows you to see more in your data by applying some simple visual techniques to transform a table." />
<script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.slidertron-0.1.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<style type="text/css">
@import "slidertron.css";
</style>
<LINK REL="SHORTCUT ICON" HREF="http://www.grvisualisation.50webs.com/favicon.ico">
</head>

<div style="background-color:white;">
    <!-- Place this tag where you want the +1 button to render. -->
    <div class="g-plusone" data-annotation="inline" data-width="300"></div>
    
    <!-- Place this tag after the last +1 button tag. -->
    <script type="text/javascript">
      (function() {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/platform.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
      })();
    </script>
</div>

<body>
<!-- Google Analytics -->
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-5253719-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<!-- end #header-wrapper -->
<div id="logo">
	<h1>Magic Table </h1>
	<em> by Dr Greg Ross</em>
</div>
<div id="header">
	<div id="menu">
		<ul>
			<li><a href="infovis.html">InfoVis</a></li>
			<li><a href="excelrangefinder.html">Excel RangeFinder</a></li>
			<li><a href="javascript_voronoi.html">Voronoi</a></li>
			<li><a href="javascript_surface_plot.html">3D Surface Plot</a></li>
			<li><a href="visi_scroll.html">visi-scroll</a></li>
			<li><a href="contact.html">Contact</a></li>
			<li><a href="publications.html">Publications</a></li>
		</ul>
	</div>
	<!-- end #menu -->
	<div id="search">
		<form method="get" action="http://www.google.com/search">
			<fieldset>
				<input type="text" name="q" id="search-text" size="15" />
				<input style="display:none;" type="checkbox"  name="sitesearch" value="grvisualisation.50webs.com" checked />
			</fieldset>
		</form>
	</div>
	<!-- end #search -->
</div>
<!-- end #header -->
<hr />
<!-- end #logo -->
<div id="slideshow">
	<!-- start -->
	<div id="foobar">
		<div id="col1"><a href="#" class="previous">&nbsp;</a></div>
		<div id="col2">
			<div class="viewer">
				<div class="reel">
					<div class="slide"><a href="gradientExample.html"><img src="images/gradients.png" width="726" height="335" alt="" /></a> <span>Magic Table - custom colour gradients</span> </div>
					<div class="slide"><a href="scatterplotExample.html"><img src="images/scatterplot.png" width="726" height="335" alt="" /></a> <span>Magic Table - Scatterplot</span> </div>
					<div class="slide"><a href="barchartExample.html"><img src="images/barchart.png" width="726" height="335" alt="" /></a> <span>Magic Table - Barchart</span> </div>
					<div class="slide"><a href="volsExample.html"><img src="images/volatilities.png" width="726" height="335" alt="" /></a> <span>Magic Table - Financial data</span> </div>
				</div>
			</div>
		</div>
		<div id="col3"><a href="#" class="next">&nbsp;</a></div>
	</div>
	<script type="text/javascript">

						$('#foobar').slidertron({
							viewerSelector:			'.viewer',
							reelSelector:			'.viewer .reel',
							slidesSelector:			'.viewer .reel .slide',
							navPreviousSelector:	'.previous',
							navNextSelector:		'.next',
							navFirstSelector:		'.first',
							navLastSelector:		'.last'
						});
						
					</script>
	<!-- end -->
</div>

<div id="page">
	<div id="page-bgtop">
		<div id="content">
			
			<!-- adsense container -->
			<div>
				<div class="post" style="float: left; width:40%;">
					<h2 class="title">Magic Table</h2>
					<div class="entry">
						<p> Use this free JavaScript library to visualise your data. Hosted on Google Code, you can download and modify the source 
						code and use or modify it as you please. </p>
					</div>
				</div>
				
				<div style="float: right;">
					<!--adsense code-->
					<script type="text/javascript"><!--
					google_ad_client = "pub-5899093360211244";
					/* 336x280, created 5/19/10 */
					google_ad_slot = "8698410079";
					google_ad_width = 336;
					google_ad_height = 280;
					//-->
					</script>
					<script type="text/javascript"
					src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
					</script>
					<!--end-->
				</div>
				
				<div style="clear: both;"></div>
			</div>
			<!-- end adsense container -->
			
			<br>
			<br>
			
			<div class="post">
				<h2 class="title">See more of your data at a glance </h2>
				<div class="entry">
					<p>The <strong>Magic Table </strong>is a JavaScript library that allows you to see more in your data by applying some simple visual techniques to transform a table. </p>
				</div>
				
				<h2 class="title">Information Visualisation</h2>
				<div class="entry">
					<p>The <a href="examples.html">examples</a> show how you can obtain a <strong>barchart</strong> or <strong>scatterplot</strong> 
					view in the table as well as a novel approach to displaying a lot more of your data without using up much valuable screen real estate. 
					The latter technique has adopted the concept of spatial distortion, using a <strong>fisheye lens</strong> model. 
					Reducing the row height and column widths so that all of the cells become visible and using colour to encode the cell 
					values affords the user an informative overview of all the data in one go. By moving a lens over this overview we can 
					magnify the cells under the lens so that we obtain detail within the overview. </p>
				</div>
				
				<h2 class="title">Google visualisation API</h2>
				<div class="entry">
					<p>The library has now also been wrapped in Google's visualisation API. 
					<a href="http://magic-table.googlecode.com/svn/trunk/magic-table/google_visualisation/example_1.html">Here's an example of how to use it this way</a>.  </p>
				</div>
				
				<h2 class="title">Easy to use</h2>
				<div class="entry">
					<p><a href="http://code.google.com/p/magic-table/downloads/detail?name=magic-table-v2.0.0.3.zip">Download</a> or 
					<a href="http://code.google.com/p/magic-table/source/checkout">checkout</a> the code and follow the 
					<a href="http://code.google.com/p/magic-table/wiki/WalkThrough">walk-through</a> 
					or the example web pages to quickly create a magic table.   </p>
				</div>
				
				<h2 class="title">Browsers</h2>
				<div class="entry">
					<p>The library has been tested in Firefox, Opera, Safari and Chrome. 
					It's super-fast in Safari. However, since it uses the canvas element, 
					it does not work in Interner Explorer. I tried to get it to work with <a href="http://excanvas.sourceforge.net/">ExplorerCanvas</a>
					  but IE is stupendously slow when it comes to <a href="http://www.w3.org/TR/NOTE-VML">VML</a> path rendering. In fact, Internet Snorer is around 10 
					  orders of magnitude slower than Safari! Alas, I decided not to continue my effort in making it compatible with IE. Instead, 
					  it is intended that the library is used in applications that have, wisely, embedded a non-IE browser engine
					   such as <a href="http://developer.mozilla.org/en/docs/Gecko_Embedding_Basics">Gecko</a> or 
					   <a href="http://en.wikipedia.org/wiki/Presto_(layout_engine)">Presto</a>.    </p>
				</div>
				
			</div>
		</div>
		<!-- end #content -->
		<div id="sidebar">
			<ul>
				<li>
					<h2>Real world use cases</h2>
					<div><a href="http://qiime.sourceforge.net/tutorials/tutorial.html" >rRNA sequencing</a></div>
					<br><br>
					<div><a href="http://collabornet.org/visualization/magic_table/e1.html">Student Degree Progress</a></div>
					<br><br>
					<div><a href="http://homepages.ecs.vuw.ac.nz/~craig/livej/everything.html">LiveJ - software visualisation</a></div>
				</li>
				<li>
					<h2>Features </h2>
					<ul>
						<li class="feature">fisheye table view</li>
						<li class="feature">bar-fill table cells</li>
						<li class="feature">customisable colour ramp</li>
						<li class="feature">colour and fill by global or by column values</li>
					</ul>
				</li>
				<li>
					<h2>License </h2>
					<ul>
						<li><a href="http://www.gnu.org/licenses/gpl.html">GNU General Public License v3</a></li>
					</ul>
				</li>
				<li>
					<h2>Downloads and source</h2>
					<div><a href="http://code.google.com/p/magic-table/downloads/detail?name=magic-table-v2.0.0.3.zip" class="links">Download</a></div>
					<div><a href="http://code.google.com/p/magic-table/source/checkout" class="links">SVN checkout</a></div>
					<p>
						I spent a lot of time and effort building the Magic Table and it's totally free. It's thirsty work, so if you like it then 
						I'd appreciate it if you...
					</p>
					<div style="text-align:center;">
						<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
							<input type="hidden" name="cmd" value="_s-xclick">
							<input type="hidden" name="hosted_button_id" value="JZSZZTB8LXNBG">
							<input type="image" src="http://www.grvisualisation.50webs.com/images/bmab.png" border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
							<img alt="" border="0" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1">
						</form>
					</div>
				</li>
				<li>
					<h2>iPhone Apps </h2>
					<ul>
						<li class="feature"><a href="http://caligramsoftware.co.uk/peekaboo">Peekaboo 3D</a></li>
						<li class="feature"><a href="http://caligramsoftware.co.uk">ClapTrax</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- end #sidebar -->
		<div style="clear: both;">&nbsp;</div>
	</div>
	<!-- end #page -->
</div>
<div id="footer">
	<p>Copyright (c) 2008 Dr Greg Ross. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
<!-- end #footer -->
</body>
</html>
